@baseFontSize:20px;
@baseSize:20;
html{
  font-size: @baseFontSize;
}
.px2rem(@name,@px){
    @{name}:@px / 2 / @baseSize * 1rem;
}

*{
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}
a{
  color: #3f3f3f
}
.heard{
  .px2rem(width,750);
  .px2rem(height,200);
  display: flex;
  justify-content:space-around;
  .px2rem(margin-bottom,30);
  color: black;
  background: url("../../assets/images/7fb2cd1224625ccfb5f1596e6f4abccf.png")no-repeat;
  background-size: cover;
  span{
    .px2rem(font-size,40);
  }
  p{
    .px2rem(font-size,25)
  }
}
.integral{
  font-weight: bold;
  .px2rem(margin-top,100);
}
.cardArea{
  display: flex;
  flex-direction: row;
  text-align: center;
  .px2rem(margin-top,100);
  div{
    .px2rem(margin-left,25);
  }
}
.functionBox{
  .px2rem(width,700);
  .px2rem(height,300);
  border: 1px solid #b6ce9f;
  border-radius: 25px;
  box-shadow:0px 2px 15px rgba(170, 251, 21, 0.5);
  background: url("../../assets/images/f25e08cc2d41b8da75a3ae90ac5759cf.png")no-repeat;
  background-size: cover;
  .px2rem(margin-top,50);
  .px2rem(margin-left,20);
  .px2rem(margin-right,20);
  display: flex;
  //flex-direction: row;
  align-content: flex-start;
  flex-wrap: wrap;
  div{
    flex: 0 0 33.333333%;
    .px2rem(margin-left,50);
    .px2rem(margin-right,50);
    .px2rem(margin-top,20);
    .px2rem(width,160);
    .px2rem(height,123);
    box-sizing: border-box;
    text-align: center;
    font-weight: bold;
  };
  span{
    .px2rem(font-size,50);
    color: #0842aa;

  }
  p{
    .px2rem(font-size,30);
  }
}
.rollChart{
  .px2rem(width,750);
  .px2rem(height,309);
  background: #ecf4e9;
  .px2rem( margin-top,40);
  .px2rem( margin-bottom,20);
  img{
    .px2rem(margin-left,20);
    .px2rem(margin-right,20);
    .px2rem(width,710);
    .px2rem(height,280);
    .px2rem( padding-top,10);
    .px2rem( padding-bottom,20);

  }
}
.commodityShop{
  .px2rem(width,750);
  .px2rem(height,100%);

}
.recommend{
  .px2rem(margin-top,20);
}
.logo{
  .px2rem(width,35);
  .px2rem(height,35);
  .px2rem(margin-left,20);

}
.h3-0{
  .px2rem(font-size,42);
  font-weight: bold;
  .px2rem(margin-left,20);
  .px2rem(margin-top,30);
}
.recommend_big {
  .px2rem(width,710);
  .px2rem(height,300);
  border: 1px solid #55a532;
  .px2rem(margin-top,20);
  .px2rem(margin-left,20);
  .px2rem(margin-right,20);

  img{
    .px2rem(width,710);
    .px2rem(height,300);
  }
}
.recommend_card{
  .px2rem(margin-top,20);
  display: flex;
  .px2rem(width,710);
  .px2rem(height,305);
  .px2rem(margin-left,20);
  .px2rem(margin-right,20);
  justify-content: space-between;
  flex-direction: row;

  img{
    .px2rem(width,225);
    .px2rem(height,285);
    border: 1px solid #55a532;
  }
}
.kong{
  .px2rem(width,750);
  .px2rem(height,20);
  .px2rem(margin-top,20);
  background: #eaffea;
}
.kong1{
  .px2rem(width,750);
  .px2rem(height,220);
  background: #eaffea;
  span{
    .px2rem(width,150);
    .px2rem(height,50);
    .px2rem(font-size,20);
    color: rgba(66, 144, 179, 0.56);
    .px2rem(line-height,150);
    .px2rem(margin-left,250);
  }
}
.roll{
  flex: 1;
  overflow-y: scroll;
  -webkit-overflow-scrolling: touch;
  height: auto;
}
.bottomArea{
  background:#fffffd;
  .px2rem(width,750);
  .px2rem(height,116);
  border-top: 1px solid #f6f6f6;
  display: flex;
  flex-direction: row;
  position:fixed;
  .px2rem(bottom,0);
  div{
    flex: 1;
    text-align: center;
    .px2rem(font-size,30);
    .px2rem(margin-top,10);
  }
}
.mui-icon{
  .px2rem(font-size,50);
}


